<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import appStore from '@/store'
import { BreadcrumbData } from '@/types/public'
import DrawerTemplate from './productsAndServices/DrawerTemplate.vue'
import routes from '@/router/routes'
import { getUserMenuData } from '@/utils/authentication'
const router = useRouter()
const route = useRoute()

const defaultActive = ref('')

const menuData: any[] = []


getUserMenuData().forEach((item) => {
  menuData.push(...routes.filter((route: any) => route.name === item && !route.isNotShow))
})

const defaultOpeneds = ref<string[]>(['0'])

watch(
  () => router.currentRoute.value,
  async () => {
    await router.isReady()

    defaultActive.value = route.name as string

    let arr: Array<BreadcrumbData> = []
    for (const key in menuData) {
      if (Object.prototype.hasOwnProperty.call(menuData, key)) {
        const element = menuData[key]
        if (route.path.includes(element.path)) {
          arr.push({
            title: element.meta.title,
            path: element.path
          })
          if (element.children && element.children.length) {
            for (const j in element.children) {
              if (Object.prototype.hasOwnProperty.call(element.children, j)) {
                const child = element.children[j]
                if (route.path.includes(child.path)) {
                  arr.push({
                    title: child.meta.title,
                    path: element.path + '/' + child.path
                  })
                }
              }
            }
          }
        }
      }
    }
    appStore.publicStore.updateBreadcrum(arr)
  }
)
const drawer = ref(false)
const handleProducts = (tab: any) => {
  defaultActive.value = tab.index
  drawer.value = !drawer.value
}

watch(drawer, (n) => {
  if (!n) {
    defaultActive.value = route.name as string
  }
})
const closeDrawer = () => {
  drawer.value = false
}
</script>
<template>
  <div :class="appStore.publicStore.isCollapse ? 'dyp-drawer-collapse' : 'dyp-drawer'">
    <el-drawer v-model="drawer" title="产品与服务列表" direction="ltr" :z-index="2000" :size="1000">
      <drawer-template :closeDrawer="closeDrawer"></drawer-template>
      <!-- <iframe
        :src="`https://auth.huaweicloud.com/authui/saml/login?xAccountType=COC_hwstaff_y30007935_sdbp02&isFirstLogin=false&service=${encodeURIComponent(
          'https://coc-console.huaweicloud.com/ecm/?region=cn-north-4&locale=zh-cn#/ecs/manager/vmList'
        )}`"
        frameborder="none"
        style="width: 1000px; height: 600px"
      ></iframe> -->
    </el-drawer>
  </div>

  <div id="left-menu">
    <div class="menu-list">
      <el-menu :default-active="defaultActive" :default-openeds="defaultOpeneds"
        :class="{ 'menu-project': !appStore.publicStore.isCollapse }" :collapse="appStore.publicStore.isCollapse" router
        :collapse-transition="false">
        <template v-for="(item, key) in menuData">
          <el-sub-menu v-if="item.children?.length" :index="item.name"
            :class="{ 'dyp-sub': !appStore.publicStore.isCollapse }">
            <template #title>
              <el-icon>
                <svg-icon :icon="item.meta.icon"
                  :class-name="appStore.publicStore.isCollapse ? 'icon' : 'icon-active'"></svg-icon>
              </el-icon>
              <span>{{ item.meta.title }}</span>
            </template>
            <template v-for="(child, key1) in item.children">
              <el-menu-item v-if="!child.isNotShow" :index="child.name" :route="{ path: item.path + '/' + child.path }">{{
                child.meta.title
              }}</el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item :index="item.name" :route="{ path: item.path }" v-else-if="item.name === 'ProductsServices'"
            style="position: relative; padding-left: 30px" @click="handleProducts">
            <svg-icon :icon="item.meta.icon"
              :class-name="appStore.publicStore.isCollapse ? 'icon' : 'icon-active-pro'"></svg-icon>
            <template #title>{{ item.meta.title }}</template>
            <div style="position: absolute; right: 0; top: 0" v-show="!appStore.publicStore.isCollapse">
              <el-icon :size="20" v-if="defaultActive === 'ProductsServices'">
                <Back />
              </el-icon>
              <el-icon :size="20" v-else>
                <Right />
              </el-icon>
            </div>
          </el-menu-item>
          <el-menu-item :index="item.name" :route="{ path: item.path }" v-else>
            <svg-icon :icon="item.meta.icon"
              :class-name="appStore.publicStore.isCollapse ? 'icon' : 'icon-active'"></svg-icon>
            <template #title>{{ item.meta.title }}</template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.dyp-drawer {
  :deep(.el-drawer.ltr) {
    left: 280px;
  }
}

.dyp-drawer-collapse {
  :deep(.el-drawer.ltr) {
    left: 65px;
  }
}

.icon-active-pro {
  margin-right: 20px;
}

#left-menu {
  padding-top: 30px;
  min-height: calc(100vh - 90px);
  background-color: $blank-color;
  border-right: 1px solid $border-color;
  z-index: 2001;

  .menu-project {
    width: 279px;
  }

  .el-menu {
    border: none;
    color: $text-color;

    .is-active {
      color: $main-color;
    }

    .el-sub-menu {
      .el-menu-item {
        height: 60px;
        margin-left: 40px;
        padding-left: 50px !important;
        border-left: 1px solid $border-color;
        border-right: 3px;
      }

      .is-active {
        border-right: 3px solid $main-color;
        background-image: linear-gradient(90deg, rgba(2, 71, 234, 0) 0%, rgba(2, 71, 234, 0.05) 100%);
      }
    }

    :deep(.el-sub-menu .el-sub-menu__icon-arrow) {
      font-size: 20px;
      top: 43%;
    }
  }

  .el-icon {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    font-size: 20px !important;
  }

  .el-sub-menu .el-icon {
    font-size: 20px !important;
  }

  :deep(.el-sub-menu.is-active .el-sub-menu__title) {
    color: $text-color;
    font-size: 14px;
    font-weight: 700;
  }

  :deep(.dyp-sub .el-sub-menu__title) {
    height: 60px;
    padding-left: 30px;
  }

  :deep(.el-menu-item:hover) {
    background: #fff;
  }

  :deep(.el-sub-menu__title:hover) {
    background: #fff;
  }
}
</style>
